<template>
  <div class="form">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      class="demo-ruleForm"
      label-width="100px"
      :label-position="labelPosition"
    >
      <el-form-item label="原密码" prop="oldPassword">
        <el-input v-model="ruleForm.oldPassword" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="ruleForm.newPassword" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="确认密码" prop="affirm">
        <el-input v-model="ruleForm.affirm" autocomplete="off" type="password" />
      </el-form-item>

      <el-form-item>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { mapActions } from "vuex";
import { post } from "@/utlis/http";
export default {
  data() {
    return {
      ruleForm: {
        oldPassword: "", //原密码
        newPassword: "", //新密码
        affirm: "", //确认密码
      },
      labelPosition: "left",
    };
  },

  methods: {
    ...mapActions(["loginOut"]),
    submitForm() {
      // 原密码判断
      if (this.ruleForm.oldPassword.trim() == "") {
        ElMessage.warning("原密码不能为空");
        return;
      }
      // 新密码判断
      if (this.ruleForm.newPassword.trim() == "") {
        ElMessage.warning("新密码不能为空");
        return;
      }
      // 确认密码判断
      if (this.ruleForm.affirm.trim() == "") {
        ElMessage.warning("确认密码不能为空");
        return;
      } else if (this.ruleForm.affirm != this.ruleForm.newPassword) {
        ElMessage.warning("新密码和确认密码不一致");
        return;
      }
      post({
        _gp: "admin",
        _mt: "newPassword",
        ...this.ruleForm,
      }).then((res) => {
        let { data, errmsg } = res.data;
        if (errmsg == "成功") {
          this.loginOut(data); //修改密码成功后调用退出登录接口
          ElMessage.success("修改成功，请重新登录");
        } else {
          ElMessage.warning(errmsg);
        }
      });
    },
    resetForm() {
      this.ruleForm = {}; //点击取消重置
    },
  },
};
</script>

<style scoped lang="less">
.form {
  width: 500px;
  margin: auto;
  & /deep/ .el-form--label-left .el-form-item__label::before {
    content: "*";
    color: red;
    margin-right: 5px;
  }
}
</style>
